

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> - blogs</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />

  
  
  <meta name="description" content="BOM要点
offset系列常用于获得元素位置offs..."> 
  
  <meta name="author" content="zhangliyao"> 

  
    <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  
  
    <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  
  
    <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  
  
    <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/blogs/css/style.css">


  
  
<link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_h1619vhl1nr.css">

  

  
  
  
<link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
  
  
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css">

  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        loadingImage: '',
      },
      donate: {
        enable: true,
        alipay: 'https://pic.izhaoo.com/alipay.jpg',
        wechat: 'https://pic.izhaoo.com/wechat.jpg'
      },
      motto: {
        api: '',
        default: '我在开了灯的床头下，想问问自己的心啊。'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        alwaysShow: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: true
      }
    }
  </script>

  

  
<meta name="generator" content="Hexo 5.2.0"></head>
<body class="lock-screen">
  <div class="loading"></div>
  


  <nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content">
      
      
      
      
      <li class="menu-item"><a href="/ " class="underline"> 首页</a></li>
      
      
      
      
      <li class="menu-item"><a href="/galleries " class="underline"> 摄影</a></li>
      
      
      
      
      <li class="menu-item"><a href="/archives " class="underline"> 归档</a></li>
      
      
      
      
      <li class="menu-item"><a href="/tags " class="underline"> 标签</a></li>
      
      
      
      
      <li class="menu-item"><a href="/categories " class="underline"> 分类</a></li>
      
      
      
      
      <li class="menu-item"><a href="/about " class="underline"> 关于</a></li>
      
    </ul>
    <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
  </div>
</nav>
  <main id="main">
  <div class="container" id="container">
    <article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/blogs/images/theme/postimage.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title"></h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>十月 15, 2020</span
        class="post-info-item">
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>2088</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <h2 id="BOM要点"><a href="#BOM要点" class="headerlink" title="BOM要点"></a>BOM要点</h2><ol>
<li>offset系列常用于获得元素位置offsetLeft offsetTop</li>
<li>client系列常用于获取元素大小clientWidth clientHeight</li>
<li>scroll常用于获取滚动距离 scrollTop scrollLeft</li>
<li>window.pageYOffset页面被卷去的头部</li>
</ol>
<h2 id="动画函数"><a href="#动画函数" class="headerlink" title="动画函数"></a>动画函数</h2><ol>
<li>必须有定位，元素才可以移动 :star:</li>
<li>div.offsetLeft获得盒子在页面的当前位置。</li>
<li>div.offsetLfet+1，盒子就会向右走一步是错的，因为offsetLfet+1只能获取不能赋值，赋值需要用style.left赋值。</li>
</ol>
<figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ini"><span class="hljs-attr">div.style.left</span>=div.<span class="hljs-literal">off</span>setLeft+<span class="hljs-number">1</span>+<span class="hljs-string">&#x27;px&#x27;</span><span class="hljs-comment">;</span><br></code></pre></td></tr></table></figure>

<ol start="4">
<li>使用定时器函数setInterval不断重复调用上述语句；</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>	div.style.left=div.offsetLeft+<span class="hljs-number">2</span>+<span class="hljs-string">&#x27;px&#x27;</span>;<br>&#125;,<span class="hljs-number">30</span>)<br></code></pre></td></tr></table></figure>

<ol start="5">
<li>加一个定时器结束的条件</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> timer=<span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>	<span class="hljs-keyword">if</span>(div.offsetLeft&gt;=<span class="hljs-number">400</span>px)&#123;<br>		<span class="hljs-comment">//停止动画，也就是停止定时器</span><br>		<span class="hljs-built_in">clearInterval</span>(timer);<br>	&#125;<br>	div.style.left=div.offsetLeft+<span class="hljs-number">2</span>+<span class="hljs-string">&#x27;px&#x27;</span>;<br>&#125;,<span class="hljs-number">30</span>)<br></code></pre></td></tr></table></figure>

<h2 id="简单动画函数的封装"><a href="#简单动画函数的封装" class="headerlink" title="简单动画函数的封装"></a>简单动画函数的封装</h2><ol>
<li>需要两个参数：obj目标对象  target目标位置</li>
<li>这样很多元素对这个函数进行调用就都可以做动画了！！！</li>
<li>动画里面必须加定位嗷！！！:strawberry:</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params">obj.traget</span>)</span>&#123;<br>	<span class="hljs-keyword">var</span> timer=<span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>		<span class="hljs-keyword">if</span>(obj.offsetLeft&gt;=target)&#123;<br>			<span class="hljs-built_in">clearInterval</span>(timer);<br>		&#125;<br>		obj.style.left=obj.offsetLeft+<span class="hljs-number">2</span>+<span class="hljs-string">&#x27;px&#x27;</span>;<br>	&#125;,<span class="hljs-number">30</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<ol start="4">
<li>为了避免每次调用函数都会开辟一个timer，可以为不同对象添加不同的定时器，可以避免函数内部var 变量的声明，节约内存同时也提高效率</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params">obj.traget</span>)</span>&#123;<br>	obj.timer=<span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>		<span class="hljs-keyword">if</span>(obj.offsetLeft&gt;=target)&#123;<br>			<span class="hljs-built_in">clearInterval</span>(obj.timer);<br>		&#125;<br>		obj.style.left=obj.offsetLeft+<span class="hljs-number">2</span>+<span class="hljs-string">&#x27;px&#x27;</span>;<br>	&#125;,<span class="hljs-number">30</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<ol start="5">
<li>但是如果是按钮触发动画执行，当我们连续点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器。因此我们在动画停下来之前我们只需要一个定时器执行。所以每次触发定时器之前，先把之前的定时器清除掉。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animate</span>(<span class="hljs-params">obj.traget</span>)</span>&#123;<br>	<span class="hljs-built_in">clearInterval</span>(obj.timer);<br>	obj.timer=<span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>		<span class="hljs-keyword">if</span>(obj.offsetLeft&gt;=target)&#123;<br>			<span class="hljs-built_in">clearInterval</span>(obj.timer);<br>		&#125;<br>		obj.style.left=obj.offsetLeft+<span class="hljs-number">2</span>+<span class="hljs-string">&#x27;px&#x27;</span>;<br>	&#125;,<span class="hljs-number">30</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="缓动动画效果"><a href="#缓动动画效果" class="headerlink" title="缓动动画效果"></a>缓动动画效果</h2><ol>
<li>让盒子每次移动距离变小，直觉上就是慢慢停下来，效果会更柔和。</li>
<li>核心算法：（目标值-现在的位置）/10；</li>
</ol>
<h2 id="轮播图案例"><a href="#轮播图案例" class="headerlink" title="轮播图案例"></a>轮播图案例</h2><ol>
<li>结构<div><ul>{<li><li>…<li>}</li>
<li>我们滑动的是<ul>，其中<ul>的移动距离是小圆圈的索引号*图片的宽度</li>
<li>一般情况下我们会设置图片的宽度就是盒子的宽度。</li>
<li>很显然<ul>要比他的父亲尺寸大，如果我们只想显示他的父盒子，那么使用<code>overflow:hidden</code>就可以了。</li>
<li>当我们点击下面的小圆圈，<ul>惠滚动到小圆圈对应的图片。</li>
<li>右侧按钮点击事件需要两个变量，一个count来控制图片，使得我们点击右侧按钮，<ul>会发生滑动，一个num来控制下面的小圆圈，当我们点击右侧按钮不仅<ul>发生滑动，小圆圈的样式也会发生改变。</li>
<li>当我们点击完小按钮，还想点击右侧按钮，实现小圆圈样式的改变和<ul>的滑动，那么要把当前圆圈的index赋值给count和num才可以。</li>
<li>需要节流阀防止动画播放过快</li>
<li>左侧按钮点击事件注意的是当当前页面为第一页时，需要将其快速跳转到最后一页。再执行动画，这样就可以实现无缝衔接。这与右侧按钮事件正好相反。</li>
<li>需要用到手动调用按钮事件，因为在轮播图自动播放就和右侧按钮点击事件效果是一样的</li>
</ol>

      </section>
      <section class="extra">
        
        <ul class="copyright">
  
  <li><strong>本文作者：</strong>zhangliyao</li>
  <li><strong>本文链接：</strong><a href="http://lalazly.gitee.io/blogs/2020/10/15/BOM%E8%A6%81%E7%82%B9/index.html">http://lalazly.gitee.io/blogs/2020/10/15/BOM%E8%A6%81%E7%82%B9/index.html</a></li>
  <li><strong>版权声明：</strong>本博客所有文章均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
      rel="external nofollow" target="_blank"> BY-NC-SA </a>许可协议，转载请注明出处！</li>
  
</ul>
        
        
        <section class="donate">
  <div class="qrcode">
    <img   class="lazyload" data-original="https://pic.izhaoo.com/alipay.jpg" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
        
<nav class="nav">
  
  
    <a href="/blogs/2020/10/15/hello-world/">Hello World<i class="iconfont iconright"></i></a>
  
</nav>

      </section>
      
      <section class="comments">
  
  <div class="btn" id="comments-btn">查看评论</div>
  
  
</section>
      
    </section>
  </div>
</article>
  </div>
</main>
  <footer class="footer">
  <div class="footer-social">
    
    
    
    
    
    <a href="tencent://message/?Menu=yes&uin=894519210 " target="_blank" onMouseOver="this.style.color= '#12B7F5'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconQQ "></i>
    </a>
    
    
    
    
    
    <a href="javascript:; " target="_blank" onMouseOver="this.style.color= '#09BB07'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconwechat-fill "></i>
    </a>
    
    
    
    
    
    <a href="https://www.instagram.com/izhaoo/ " target="_blank" onMouseOver="this.style.color= '#DA2E76'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconinstagram "></i>
    </a>
    
    
    
    
    
    <a href="https://github.com/izhaoo " target="_blank" onMouseOver="this.style.color= '#24292E'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  icongithub-fill "></i>
    </a>
    
    
    
    
    
    <a href="mailto:izhaoo@163.com " target="_blank" onMouseOver="this.style.color='#FFBE5B'"
      onMouseOut="this.style.color='#33333D'">
      <i class="iconfont footer-social-item  iconmail"></i>
    </a>
    
  </div>
  <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  <div class="fab fab-daovoice">
    <i class="iconfont iconcomment"></i>
  </div>
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
</body>


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>






<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>






<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>






<script src="/blogs/js/utils.js"></script>
<script src="/blogs/js/modules.js"></script>
<script src="/blogs/js/zui.js"></script>
<script src="/blogs/js/script.js"></script>





<script>
  (function (i, s, o, g, r, a, m) {
    i["DaoVoiceObject"] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    a.charset = "utf-8";
    m.parentNode.insertBefore(a, m)
  })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') +
    "//widget.daovoice.io/widget/0f81ff2f.js", "daovoice")
  daovoice('init', {
    app_id: "abcdefg"
  }, {
    launcher: {
      disableLauncherIcon: true,
    },
  });
  daovoice('update');
</script>



<script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>


<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?4c204d8bc027a0455b5fc642ac334ca8";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>










</html>